<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
        }
        .amap-overlay-text-container {
            padding: 2px 0 1px;
        }
    </style>
    <title>幸运之城</title>
</head>

<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=00f1821bb74b42f08495f0f771e00cca&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923], // 不设置 自动定位
        zoom: 1
    });

    map.addControl(new AMap.ToolBar());

    map.addControl(new AMap.Scale());


    // 初始化绘制参数
    var options = [];
    options['strokeColor'] = '#3366FF'; // 画笔颜色
    options['strokeWeight'] = 1; // 画线宽度
    options['strokeOpacity'] = 1; // 透明度
    options['strokeStyle'] = 'dashed'; // 线样式，实线:solid，虚线:dashed
    options['zIndex'] = 50; // 线条层级
    options['fillColor'] = '#ffffff'; // 填充颜色
    options['fillOpacity'] = 1;// 填充透明度 1 不透明  0 完全透明
    options['radius'] = 6; // 圆半径


    var ASC = 17;
    var MC = 20;
    // 赤经赤纬是地理坐标在天球上的投影

    // 赤经  从春分点沿着天赤道向东到天体时圈与天赤道的交点所夹的角度 单位是时、分、秒  1h=15゜，1m=15'，1s=15"
    // var planet1 = [];
    // planet1[0] = 16.644399826458994;
    // planet1[1] = 210.00004606012365;
    // planet1[2] = 352.01729188049734;
    // planet1[3] = 4.5865837941814034;
    // planet1[4] = 113.19200183852148;
    // planet1[5] = 188.64477304768332;
    // planet1[6] = 329.85330210445130;
    // planet1[7] = 293.89313406973531;
    // planet1[8] = 292.68771756454112;
    // planet1[9] = 236.27014266617894;
    // planet1[12] = 254.03754378391488;
    // planet1[17] = 355.02202390509802;
    // planet1[20] = 266.12510939166651;
    var planet1 = {$planet1};
    var planet2 = {$planet2};

    // 赤纬
    // var planet2 = [];
    // planet2[0] = 7.0789710980901415;
    // planet2[1] = -15.736843710498448;
    // planet2[2] = -5.6918464083435003;
    // planet2[3] = 9.5418494888355045;
    // planet2[4] = 24.142060443307606;
    // planet2[5] = -1.9944759684047457;
    // planet2[6] = -13.499743592636234;
    // planet2[7] = -22.073256821354498;
    // planet2[8] = -21.116953107923141;
    // planet2[9] = -4.6543242917212124;
    // planet2[12] = -22.628980646805903;
    // planet2[17] = -2.1545755266649609;
    // planet2[20] = -23.392335796485966;
    var names = [];
    names[0] = '光明线';
    names[1] = '安居线';
    names[2] = '智慧线';
    names[3] = '桃花线';
    names[4] = '拼搏线';
    names[5] = '幸运线';
    names[6] = '成长线';
    names[7] = '惊奇线';
    names[8] = '梦想线';
    names[9] = '生死线';
    names[12] = '宿命线';
    // 光明线（日）0 #ffb826  荣耀线
    // 安居线（月）1 #bcd2ec  情绪线
    // 智慧线（水）2 #6dc5fd  学业线
    // 桃花线（金）3 #ff8f8f
    // 拼搏线（火）4 #ea8212
    // 幸运线（木）5 #2ddbc7
    // 成长线（土）6 #ab6a2f  压力线
    // 惊奇线（天王）7 #27cbe9
    // 梦想线（海王）8 #ac70f3
    // 生死线（冥王）9 #283ea5
    // 宿命线（北交）12 #8297c1
    // 线颜色
    var colors = [];
    colors[0] = '#ffb826';
    colors[1] = '#bcd2ec';
    colors[2] = '#6dc5fd';
    colors[3] = '#ff8f8f';
    colors[4] = '#ea8212';
    colors[5] = '#2ddbc7';
    colors[6] = '#ab6a2f';
    colors[7] = '#27cbe9';
    colors[8] = '#ac70f3';
    colors[9] = '#283ea5';
    colors[12] = '#8297c1';


    // 用户出生地经度
    var lon = {$lon};    // 用户出生地纬度
    // var lat = 27.1;

    var longm = Mod(planet1[MC] - lon); // 天顶的赤经 - 用户经度
    // console.log("longm:"+longm);

    var lat_max = 90; // 最大纬度值
    var lat_min = -90; // 最小纬度值

    var degToRadian = 180 / Math.PI; // 角度转弧度
    var radianToDeg = Math.PI / 180; // 弧度转角度


    // 需要绘制的线有 日0月1水2金3火4木5土6天7海8冥9 北交点12   总共11个行星
    for (var i = 0; i <= 20; i++) {
        // 此处过滤掉不需要绘制的线
        if (i > 9 && i !== 12) continue;

        var color = colors[i];

        // 行星-天顶 垂直线
        var x1 = Mod(planet1[i] + lon - planet1[MC]); // 行星赤经 + 用户经度 - 天顶赤经值

        options['path'] = [
            [x1, lat_min],
            [x1, lat_max]
        ]; // 垂直线的起点x1,y1和终点x2,y2

        options['strokeColor'] = color; // 线颜色

        DrawLine(options); // 绘制天顶线
        var textOptions = [];
        //Ⅰ 、Ⅱ、Ⅲ、Ⅳ
        textOptions['path'] = [x1, 30];
        textOptions['text'] = names[i] + 'Ⅱ';
        textOptions['color'] = color;
        LineText(textOptions);

        options['strokeWeight'] = 3;

        options['path'] = [x1, planet2[i]];

        DrawCircle(options);// 能量最强的点

        options['strokeWeight'] = 2;


        // 行星-天底 垂直线
        var x2 = Mod(x1 + 180); // 行星赤经 + 用户经度 + 180 - 天顶赤经值

        options['path'] = [
            [x2, lat_min],
            [x2, lat_max]
        ]; // 垂直线的起点x1,y1和终点x2,y2

        options['strokeColor'] = color; // 线颜色

        DrawLine(options); // 绘制天底线

        textOptions['path'] = [x2, 30];
        textOptions['text'] = names[i] + 'Ⅳ';
        LineText(textOptions);

        var xold1 = -1000, xold2 = -1000; // 初始化

        var pathASC = [];
        var pathASC2 = [];
        var pathDES = [];
        var pathDES2 = [];

        for (var lat = lat_min; lat <= lat_max; lat += 1) {
            // console.log("循环开始 lat:"+lat);

            // 行星i的弧度（赤纬值转为弧度）正切值 * 当前循环弧度（纬度转为弧度）正切值
            // 资料来源： https://baike.baidu.com/item/Tan/14821216?fr=aladdin
            // 以下为基于直角三角形
            // 正切：把∠A的对边与邻边的比叫做∠A的正切（tangent），记作tanA
            // tanA=sinA/cosA
            var ad = Math.tan(planet2[i] / degToRadian) * Math.tan(lat / degToRadian);
            // console.log("Math.tan("+planet2[i]+"/(180/π)) * Math.tan("+lat+"/(180/π)) ="+ad);

            ad = Math.asin(ad);
            // console.log("Math.asin(ad)="+ad);

            var z = Mod(planet1[i] - ad * degToRadian - 90 - longm);

            if (!isNaN(z)) {
                // console.log("经度 = "+z,"  纬度 = " + lat);

                if ((xold1 !== -1000 && xold1 * z < 0 && Math.abs(xold1) > 90) || pathASC2.length > 0) {
                    pathASC2.push([z, lat]);
                } else {
                    pathASC.push([z, lat]);
                }
                xold1 = z;
            }

            z = Mod(planet1[i] + ad * degToRadian + 90 - longm);

            if (!isNaN(z)) {
                // console.log("经度 = "+z,"  纬度 = " + lat);

                if ((xold2 !== -1000 && xold2 * z < 0 && Math.abs(xold2) > 90) || pathDES2.length > 0) {
                    pathDES2.push([z, lat]);
                } else {
                    pathDES.push([z, lat]);
                }

                xold2 = z;
            }
        }
        // 开始绘制上升线
        options['path'] = pathASC;
        options['strokeColor'] = color;
        DrawLine(options);
        options['path'] = pathASC2;
        DrawLine(options);


        // 开始绘制下降线
        options['path'] = pathDES;
        options['strokeColor'] = color;
        DrawLine(options);
        options['path'] = pathDES2;
        DrawLine(options);

        var ascText = Math.asin(Math.tan(planet2[i] / degToRadian) * Math.tan(30 / degToRadian));
        var textLon = Mod(planet1[i] - ascText * degToRadian - 90 - longm);

        textOptions['path'] = [textLon, 30];
        textOptions['text'] = names[i] + 'Ⅰ';
        LineText(textOptions);

        textLon = Mod(planet1[i] + ascText * degToRadian + 90 - longm);

        textOptions['path'] = [textLon, 30];
        textOptions['text'] = names[i] + 'Ⅲ';
        LineText(textOptions);
    }

    // Mod函数实现 地图经度为-180～180度 西经180度到东经180度
    function Mod(d) {
        d -= Math.floor(d / 360) * 360;

        if (d >= 180) d -= 360;

        else if (d < -180) d += 360;

        return d;
    }

    // 绘制直线 并返回该折线对象
    function DrawLine(options) {
        var polyline = new AMap.Polyline({
            path: options['path'],
            strokeColor: options['strokeColor'],
            strokeOpacity: options['strokeOpacity'],
            strokeWeight: options['strokeWeight'],
            strokeStyle: options['strokeStyle'],
            zIndex: options['zIndex'],
            lineJoin: 'round', // 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
            lineCap: 'round'
        });

        polyline.setMap(map);

        return polyline;
    }

    /**
     * 绘制圆
     * @param options
     * @constructor
     */
    function DrawCircle(options) {
        var circleMarker = new AMap.CircleMarker({
            center: options['path'],
            radius: options['radius'],
            fillColor: options['fillColor'],
            fillOpacity: options['fillOpacity'],
            strokeColor: options['strokeColor'],
            strokeWeight: options['strokeWeight'],
            strokeOpacity: options['strokeOpacity'],
            zIndex: options['zIndex']
        });

        map.add(circleMarker);

        return circleMarker;
    }

    function LineText(options) {
        // 创建纯文本标记
        var text = new AMap.Text({
            text: options['text'],
            style: {
                'border-radius': '3px',
                'background-color': options['color'],
                'width': '12px',
                'border-width': 0,
                // 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                'text-align': 'center',
                'font-size': '11px',
                'color': '#fff',
                'word-break': 'break-all',
                'white-space': 'pre-wrap',
                'word-wrap': 'break-word',
                'line-height': '12px'
            },
            position: options['path']
        });

        text.setMap(map);

        return text;
    }


    window.Bezier = {
        /**
         * 获取控制点坐标
         * @param arr array  4个点坐标数组
         * @param smooth_value float [0, 1] 平滑度
         * p1 上一个点
         * p2 左端点
         * P3 右端点
         * p4 下一个点
         * @return array 2个点坐标数组
         */
        getControlPoints: function (arr, smooth_value) {
            var x0 = arr[0].x, y0 = arr[0].y;
            var x1 = arr[1].x, y1 = arr[1].y;
            var x2 = arr[2].x, y2 = arr[2].y;
            var x3 = arr[3].x, y3 = arr[3].y;
            // 控制点在 (x1,y1) 、 (x2,y2) 之间
            // x0,y0 - 前一个顶点
            // x3,y3 - 下一个顶点
            // 1.假设控制点在(x1,y1)和(x2,y2)之间,第一个点和最后一个点分别是曲线路径上的上一个点和下一个点
            // 2.求中点
            var xc1 = (x0 + x1) / 2.0;
            var yc1 = (y0 + y1) / 2.0;
            var xc2 = (x1 + x2) / 2.0;
            var yc2 = (y1 + y2) / 2.0;
            var xc3 = (x2 + x3) / 2.0;
            var yc3 = (y2 + y3) / 2.0;
            // 3.求各中点连线长度
            var len1 = Math.sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
            var len2 = Math.sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
            var len3 = Math.sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));
            // 4.求中点连线长度比例(用来确定平移前p2, p3的位置)
            var k1 = len1 / (len1 + len2);var k2 = len2 / (len2 + len3);
            // 5.平移p2
            var xm1 = xc1 + (xc2 - xc1) * k1;
            var ym1 = yc1 + (yc2 - yc1) * k1;
            // 6.平移p3
            var xm2 = xc2 + (xc3 - xc2) * k2;
            var ym2 = yc2 + (yc3 - yc2) * k2;
            // 用平滑度来计算控制点
            // 系数k 取值范围 [0～1]
            // 7.微调控制点与顶点之间的距离,越大曲线越平直
            var ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
            var ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;
            var ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
            var ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;

            return [{x: ctrl1_x, y: ctrl1_y}, {x: ctrl2_x, y: ctrl2_y}];
        }
    };


</script>
{include file="public/sensors" /}
</body>
</html>
